<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 550px;
            height: 500px;
            background-color: rgb(249, 115, 70);
            margin: 100px 50px;
        }

        .box textarea {
            margin: 10px 0 0 50px;
        }

        .box .right1 {
            position: absolute;
            right: 50px;
            bottom: 100px;
        }

        .box .right2 {
            position: absolute;
            right: 80px;
            bottom: 150px;
        }

        .box .right3 {
            position: absolute;
            right: 50px;
            bottom: 150px;
        }
    </style>
</head>

<body>
    <div class="box">
        昵称：<input type="text" id="user" value=""><br>
        <textarea name="" cols="50" rows="10" id="text"></textarea><br>
        <input type="checkbox" class="right2"><span class="right3">匿名</span><br>
        <input type="button" value="发表" class="right1">
    </div>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        var $box = $(".box")
        var $btn = $(".right1")
        var $check = $(".right2")
        var $user = $("#user")
        var $text = $("#text")
        var date = new Date();
        var H = date.getHours();
        var M = date.getMinutes();
        var S = date.getSeconds();
        // console.log(H)
        // if (H >= 12 ) {
        //     console.log("上午"+ H + ":")
        //     // console.log(H1+":"+M1+":"+S1)
        // }
        function time(window,undefined){
            if (H <= 12) {
            // console.log("下午"+ H + ":")
            var H1 ="上午"+ H + ":" 
            }else{
            var H1 ="下午"+ H + ":"   
            }
            if (M <= 9) {
            // console.log("0"+ M + ":")
            var M1 ="0"+ M + ":" 
            }else{
            var M1 = M + ":"
            }     
            if (S <= 9) {
            // console.log("0"+ S + ":")
            var S1 ="0"+ S 
            }
            else{
            var S1 = S 
            }  
            return time=H1+M1+S1
            window.time = time;
        }
        time(H,M,S)
        console.log(time)

        // console.log($user.val())
        // console.log($text.text())
        // console.log($text.val())
        $btn.click(function () {
            // console.log(time)
            var v1 = $user.val()
            var v2 = $text.val()
            if (v1 === "" || v2 === "") {
                // console.log($user.val())
                // console.log($text.val())
                alert("昵称和内容不能为空")
            } else if ($check.is(":checked")) {
                // 创建元素
                var $new1 = $("<span>路人甲</span>")
                var $new2 = $("<p></p>")
                var $time = $("<span></span>")
                $new2.text(v2)
                $time.text(time)
                $btn.before($new1)
                    .before($time)
                    .before($new2)
            } else {
                var $new3 = $("<span></span>")
                $new3.text(v1)
                var $new4 = $("<p></p>")
                $new4.text(v2)
                var $time = $("<span></span>")
                $time.text(time)
                $btn.before($new3)
                    .before($time)
                    .before($new4) 
            }
        }) 
    </script>
</body>
</html>